<template>
  <HtitleNav title="个人中心" subheading="这里可以修改你的个人信息" />
  <n-table :single-line="false" style="margin-top: 10px; border-radius: 3px;">
    <thead>
      <tr>
        <th>账号名称</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{{userName}}</td>
      </tr>
    </tbody>
  </n-table>

  <n-button type="info" style="margin-top: 10px;" @click="showModal = true">
    编辑
  </n-button>
  <n-modal v-model:show="showModal" class="custom-card" preset="card" :style="bodyStyle" title="卡片预设" size="huge"
    :bordered="false" :segmented="segmented">
    <template #header-extra>
      噢!
    </template>
    内容
    <template #footer>
      尾部
    </template>
  </n-modal>
</template>
<script setup>
import HtitleNav from "@/components/HtitleNav/HtitleNav.vue"
import { ref, onMounted } from "vue"
import { mainData } from "@/stores/index.js"
import { storeToRefs } from "pinia"


// 变量区域
let piniaData = mainData()

let { webTitle, ifUserAuthority, userName } = storeToRefs(piniaData)

let bodyStyle = ref({
  width: "600px"
})
let segmented = ref({
  content: "soft",
  footer: "soft"
})
let showModal = ref(false)

onMounted(() => {

})
</script>
<style scoped>
@import url("@/styles/ViewCss/UserView.css");
</style>